<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{showBack:false,backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div style="margin-top: 28px">
        <div class="inputbox">
          <chimage class="icon" :src="require('@/assets/img/icon_mm.png')" mode="aspectFit"></chimage>
          <input class="input" v-model.trim="password" placeholder="请输入新密码" type="password" @focusout="inputBlur" @focusin="inputFocus"/>
        </div>
        <div class="inputbox">
          <chimage class="icon" :src="require('@/assets/img/icon_mm.png')" mode="aspectFit"></chimage>
          <input class="input" v-model.trim="repassword" placeholder="请再次输入密码" type="password" @focusout="inputBlur" @focusin="inputFocus"/>
        </div>

        <div class="tip">提示：请输入8-16位包含数字和字母的密码</div>

        <div style="margin-top: 32px">
          <button class="button" @click="onSubmit">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import { cookie } from 'vux'
  import Account from '../../dll/account'
  // import Util from '@/utils/util'

  export default {
    name: 'login',
    data () {
      return {
        xheader: {
          title: '重置密码'
        },
        co_number: null,
        password: '',
        repassword: '',
        passwd_reg: /(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_]+$)(?![\d\W]+$)(?![a-z0-9]+$)(?![a-z\\W_]+$)(?![0-9\\W_]+$)(^[a-zA-Z0-9\W_]{8,16}$)/
      }
    },
    watch: {},
    created () {
      this.init()
    },
    methods: {
      init () {
      },
      async onSubmit () {
        if (this.password != this.repassword) {
          this.$vux.alert.show({
            title: '提示',
            content: '两次密码输入不一致'
          })
          return
        }
        if (!this.passwd_reg.test(this.password)) {
          this.$vux.alert.show({
            title: '账号安全',
            content: '请输入8-16位字符的密码,且包含数字,大小写字母，特殊字符任意三种'
          })
          return
        }
        window.scrollBy(0, 10)
        let param = {
          password: this.password,
          repassword: this.repassword
        }
        this.$vux.loading.show({
          text: '验证中...'
        })
        let res = await Account.resetPassword(param)
        this.$vux.loading.hide()
        var _this = this
        if (res.code) {
          localStorage.loginPassword = this.password
          this.$vux.alert.show({
            title: '提示',
            content: res.data,
            onHide () {
              _this.$router.replace({
                name: 'login',
                params: {}
              })
            }
          })
          return
        }
        this.$vux.alert.show({
          title: '提示',
          content: res.data
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  body {
    background-color: #ffffff;
  }

  .page {
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    background-color: #fff;
  }

  .logo {
    height: 51px;
    width: 119px;
  }

  .text {
    margin-top: 16px;
    color: #351009;
    font-size: 34px;
    line-height: 48px;
  }

  .inputbox {
    border: 1px solid #f5f3f3;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 12px;
  }

  .inputbox2 {
    margin: 12px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
  }

  .inputbox2 > .inputbox {
    flex: 1
  }

  .inputbox2 .inputbox .input {
    width: 100px;
  }

  .code_btn {
    border: 1px solid #f5f3f3;
    height: 58px;
    border-left-style: none;
    line-height: 58px;
    font-size: 15px;
    background-color: #f5f3f3;
    text-align: center;
    padding: 0 8px;
  }

  .code_btn span {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .inputbox .icon {
    width: 26px;
    height: 26px;
  }

  .inputbox .icon + .input {
    margin-left: 8px;
  }

  .inputbox .input {
    font-size: 17px;
    color: #351009;
    letter-spacing: 1.06px;
    line-height: 24px;
    height: 24px;
    flex: 1;
  }

  .inputbox + .inputbox {
    margin-top: 12px;
  }

  .button {
    height: 44px;
    font-size: 16px;
    line-height: 44px;
  }

  .des {
    font-size: 15px;
  }

  .mt12 {
    margin-top: 12px;
  }

  .disabled {
    background: #b4b3b2;
  }

  .tip {
    font-size: 12px;
    margin: 12px 0;
    color: red;
  }
</style>
